<script lang="ts" setup>
import type { DropMenu } from '#/components/dropdown/src/typing';

import { onMounted } from 'vue';

import { useFs } from '@fast-crud/fast-crud';
import { Button } from 'ant-design-vue';

import { DefLoginLogApi } from '#/api/devOperation/system/defLoginLog';
import { Dropdown } from '#/components/dropdown';
import { PermCode } from '#/enums/perm';
import { useMessage } from '#/hooks/web/useMessage';

import { clearList, createCrudOptions } from './data/crud';

defineOptions({
  name: '登录日志',
  inheritAttrs: false,
});

const { createConfirm } = useMessage();
const permCode = PermCode.devOperation.system.defLoginLog;

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
});

// 页面打开后获取列表数据
onMounted(async () => {
  crudExpose.doRefresh();
});

function handleClearEvent(menu: DropMenu) {
  createConfirm({
    iconType: 'warning',
    content: '确认要清理数据吗？',
    onOk: async () => {
      await DefLoginLogApi.clear(menu.event);
      crudExpose.doRefresh();
    },
  });
}
</script>

<template>
  <FsPage>
    <FsCrud ref="crudRef" v-bind="crudBinding">
      <template #actionbar-right>
        <Dropdown
          :drop-menu-list="clearList"
          :trigger="['click']"
          overlay-class-name="app-locale-picker-overlay"
          placement="bottom"
          @menu-event="handleClearEvent"
        >
          <Button v-hasAnyPermission="[permCode.delete]" type="primary">
            清理日志
          </Button>
        </Dropdown>
      </template>
    </FsCrud>
  </FsPage>
</template>
